
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>缴费业务</title>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="static/js/layui/layui-v2.6.3/css/layui.css" media="all">
</head>
<body>


<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">支付</button>
<%--    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>--%>
<%--    <button class="layui-btn" data-type="isAll">验证是否全选</button>--%>
</div>
<table id="demo" lay-filter="test"></table>

<script src="static/js/layui/layui-v2.6.3/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('demo')
                    ,data = checkStatus.data;
                var pid ;
                for (let i = 0; i < data.length; i++) {
                   pid = data[i].id;
                }
                if (data.length<1||data.length>1){
                    layer.msg("至少至多选择一个缴费项目!",{icon:4,time:2000, shift: 6});
                    return;
                }

                var index = layer.open({
                    title: '支付',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'pay/toPaymentPag?id='+pid
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('demo')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('demo');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,width:1300
            ,url: 'pay/payData' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox'}
                 ,{field: 'id', title: 'ID', width:100, sort: true,align: 'center'}
                ,{field: 'payProject', title: '收费项目', width:200,align: 'center'}
                ,{field: 'payYear', title: '收费年度', width:200,align: 'center'}
                ,{field: 'payRange', title: '区间', width:150,align: 'center'}
                ,{field: 'payMoney', title: '应缴金额', width: 177,align: 'center'}
                ,{field: 'payStatus', title: '状态', width: 150, sort: true,templet:'#setStatus',align: 'center'}
                ,{field: 'payReceive', title: '应收金额', width: 150, sort: true,align: 'center'}
                ,{field: 'payRelief', title: '减免金额', width: 150,align: 'center'}
            ]]
            ,limits: [10,20,30]  //一页选择显示3,5或10条数据
            ,limit: 10  //一页显示10条数据
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
            var result;
            if(this.page.curr){
                result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
            }
            else{
                result=res.data.slice(0,this.limit);
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": result //解析数据列表
            };
        }

        });



    });
</script>

<script type="text/html" id="setStatus">
    <%--    按钮默认关--%>
    <input type="checkbox" name="close" id="{{d.payStatus}}"
           {{#  if(d.payStatus === 1){ }}
           {{#  } else { }}
           checked=""
           {{#  } }}
           lay-skin="switch" lay-text="欠费|非欠费"  lay-filter="switchTest" disabled>
</script>
</body>
</html>
